<template>
  <view class="songList_Tag">
    <text class="zzz" style=" display: block; margin-bottom: 0;">热门</text>
    <view class="hotList">
      <view class="hotList_container" v-for="(item, i) in hotListTag" :key="i" @click="navTypeSongList(item.name)">
        <text class="iconfont icon-fire" style="font-size: 28rpx;">{{ item.name }}</text>
      </view>
    </view>
    <text class="zzz">语种</text>
    <view class="languageList">
      <view class="languageList_container" v-for="(item, i) in languageList" :key="i" @click="navTypeSongList(item.name)">
        <text :class="item.hot ? 'iconfont icon-fire' : ''" style="font-size: 28rpx;">{{ item.name }}</text>
      </view>
    </view>
    <text class="zzz">风格</text>
    <view class="styleList">
      <view class="styleList_container" v-for="(item, i) in styleList" :key="i" @click="navTypeSongList(item.name)">
        <text :class="item.hot ? 'iconfont icon-fire' : ''" style="font-size: 28rpx;">{{ item.name }}</text>
      </view>
    </view>
    <text class="zzz">场景</text>
    <view class="areaList">
      <view class="areaList_container" v-for="(item, i) in areaList" :key="i" @click="navTypeSongList(item.name)">
        <text :class="item.hot ? 'iconfont icon-fire' : ''" style="font-size: 28rpx;">{{ item.name }}</text>
      </view>
    </view>
    <text class="zzz">情感</text>
    <view class="emotionList">
      <view class="emotionList_container" v-for="(item, i) in emotionList" :key="i" @click="navTypeSongList(item.name)">
        <text :class="item.hot ? 'iconfont icon-fire' : ''" style="font-size: 28rpx;">{{ item.name }}</text>
      </view>
    </view>
    <text class="zzz">主题</text>
    <view class="themeList">
      <view class="themeList_container" v-for="(item, i) in themeList" :key="i" @click="navTypeSongList(item.name)">
        <text :class="item.hot ? 'iconfont icon-fire' : ''" style="font-size: 28rpx;">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.getAllTags()
  },
  data() {
    return {
      hotListTag: [],
      areaList: [],
      emotionList: [],
      themeList: [],
      languageList: [],
      styleList: []
    }
  },
  methods: {
    async getAllTags() {
      const { data: res } = await uni.$http.get('playlist/catlist')
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('分类歌单标签获取失败')
      res.sub.filter(item => {
        if (item.category === 0) {
          this.languageList.push(item)
        } else if (item.category === 1) {
          this.styleList.push(item)
        } else if (item.category === 2) {
          this.areaList.push(item)
        } else if (item.category === 3) {
          this.emotionList.push(item)
        } else if (item.category === 4) {
          this.themeList.push(item)
        }
        if (item.hot === true) {
          this.hotListTag.push(item)
        }
      })
    },
    navTypeSongList(name) {
      uni.navigateTo({
        url: '/subpkg/SongTypeList/SongTypeList?name=' + name
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.languageList,
.hotList,
.emotionList,
.areaList,
.styleList,
.themeList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50rpx;
}
.languageList_container,
.hotList_container,
.emotionList_container,
.themeList_container,
.areaList_container,
.styleList_container {
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: #f3f3f3;
  background: rgba(100, 100, 100, 0.1);
  // flex: 1;
  width: 150rpx;
  height: 80rpx;
  margin: 20rpx;
  border-radius: 20rpx;
}
.languageList_container text {
  text-align: center;
}
.zzz {
  margin: 30rpx;
}
</style>
